<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>节目管理</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">

    <style>
        .btn-disabled {
            pointer-events: none;
            filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
            -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
            opacity: 0.5; /*其他，透明度50%*/
        }
    </style>
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">

                        <div class="filter-group">

                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>节目名称</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="节目名称" name="programName"
                                               th:value="${programName}">
                                    </div>
                                </div>
                            </div>

                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>状态</label></div>
                                    <div class="flex1">
                                        <select name="programStatus">
                                            <option value="">全部</option>
                                            <option value="2" th:selected="2 == ${programStatus}">待发布</option>
                                            <option value="1" th:selected="1 == ${programStatus}">待审批</option>
                                            <option value="0" th:selected="0 == ${programStatus}">已审批</option>
                                            <option value="3" th:selected="3 == ${programStatus}">已过期</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <a shiro:hasPermission="P_B_program_add" onclick="addProgram()" data-title="创建节目"
                           class="j-btn-control z-btn z-default">创建节目</a>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>节目ID</th>
                        <th>节目名称</th>
                        <th>节目时长（S）</th>
                        <th>场景数</th>
                        <th>创建人</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>过期时间</th>
                        <th>操作</th>
                        </thead>
                        <tbody>

                        <tr th:each="program: ${result}"
                            th:attr="
                            data-program-id=${program.programId},
                            data-program-name=${program.programName},
                            data-program-version=${program.programVersion},
                            data-program-duration=${program.programDuration},
                            data-scene-num=${program.sceneNum},
                            data-add-user-name=${program.addUserName},
                            data-program-status=${program.programStatus},
                            data-update-time=${program.updateTime},
                            data-add-status=${program.addStatus},
                            data-overdue-time=${program.overdueTime}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td th:text="${program.programId}"></td>
                            <td>
                                <a onclick="programDetail(this)"
                                   th:attr="data-program-id=${program.programId},
                                   data-program-status=${program.programStatus},
                                   data-program-add-status=${program.addStatus}"
                                   th:text="${program.programName}"></a>
                            </td>
                            <td th:text="${(program.programDuration == null || program.programDuration == 0) ?'0':#numbers.formatDecimal((program.programDuration/1000.0), 0, 2)}"></td>
                            <td th:text="${program.sceneNum == null?'0':program.sceneNum}"></td>
                            <td th:text="${program.addUserName}"></td>
                            <td th:text="${program.programStatus}"></td>
                            <td th:text="${program.updateTime}"></td>
                            <td th:text="${program.overdueTime}"></td>
                            <td class="btn-group">
                                <a th:if="${program.programStatus == '已审批'}"
                                   onclick="downloadDetail(this)"
                                   th:attr="data-program-version=${program.programVersion}">下载详情</a>
                                <a th:if="${program.programStatus == '已审批'}"
                                   onclick="deleteFromDevice(this)"
                                   th:attr="data-program-version=${program.programVersion}">从终端删除</a>
                                <a shiro:hasPermission="P_B_program_edit" th:if="${program.programStatus == '待发布'}"
                                   onclick="editProgram(this)"
                                   th:attr="data-program-id=${program.programId},data-add-status=${program.addStatus}">编辑</a>
                                <a shiro:hasPermission="P_B_program_approve" th:if="${program.programStatus == '待审批'}"
                                   onclick="authProgram(this)" th:attr="data-program-id=${program.programId}">审批</a>
                                <a shiro:hasPermission="P_B_program_delete"
                                   th:if="${program.programStatus == '待发布' || program.programStatus == '待审批' || program.programStatus == '已过期'}"
                                   onclick="deleteProgram(this)" th:attr="data-program-id=${program.programId}">删除</a>
                                <a onclick="showLogs(this)"
                                   th:attr="data-program-version=${program.programVersion}">操作日志</a>
                                <a th:if="${program.programStatus == '已审批' && program.zipUrl != null && program.zipUrl != ''}"
                                   onclick="exportZip(this)" th:attr="data-zip-url=${program.zipUrl}">导出</a>
                                <a th:if="${program.programStatus == '已审批' && (program.zipUrl == null || program.zipUrl == '')}"
                                   class="btn-disabled"
                                   onclick="exportZip(this)" th:attr="data-zip-url=${program.zipUrl}">导出</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script>
    var context = $("meta[name='ctx']").attr("content") || '';
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var programName = '[[${programName}]]';
    var programStatus = '[[${programStatus}]]';
    var token = '[[${token}]]';
    var clientEditDomain = '[[${clientEditDomain}]]';
    var clientPushDomain = '[[${clientPushDomain}]]';
    var clientCheckDomain = '[[${clientCheckDomain}]]';
    var clientVerifyDomain = '[[${clientVerifyDomain}]]';
    var clientDetailDomain = '[[${clientDetailDomain}]]';

    function isBlank(param) {
        if (null == param) {
            return true;
        }
        if ('' === param) {
            return true;
        }
        if (undefined === param) {
            return true;
        }
        return false;
    }

    /**
     * 拼接请求参数
     * @param pageNum
     * @param pageIndex
     */
    function createQueryParam(pageIndex, pageSize) {
        var param = '';
        if (!isBlank(pageSize)) {
            param += "&pageSize=" + pageSize;
        }
        if (!isBlank(pageIndex)) {
            param += "&pageNum=" + pageIndex;
        }
        if (!isBlank(programName)) {
            param += "&programName=" + programName;
        }
        if (!isBlank(programStatus)) {
            param += "&programStatus=" + programStatus;
        }
        if (!isBlank(param)) {
            param = param.substring(1);
        }
        return param;
    }

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".pagination a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })
        return temp.join(',');
    }

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var param = createQueryParam(pageIndex, pageSize);
            window.location.href = context + "/cpProgram/listByPage" + !isBlank(param) ? "?" + param : "";
        }
    })

    /**
     * 删除节目
     * @param btn
     */
    function deleteProgram(btn) {
        var data = btn.dataset;
        var programId = data.programId;
        if (isBlank(programId)) {
            popup.tipsTop("节目ID错误，请联系管理员", 'warning');
        } else {
            if (confirm('确认是否删除')) {
                $.ajax({
                    type: "POST",
                    url: context + "/cpProgram/deleteProgram",
                    data: {programId: programId},
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {
                            popup.tipsTop(result.msg, 'success');
                            setTimeout(function () {
                                window.location.href = context + "/cpProgram/listByPage";
                            }, 1000);
                        } else {
                            popup.tipsTop(result.msg, 'error');
                        }
                    }
                });
            }
        }
    }

    /**
     * 节目详情
     * @param btn
     */
    function programDetail(btn) {
        var data = btn.dataset;
        var programId = data.programId;
        var programStatus = data.programStatus;
        var programAddStatus = data.programAddStatus;
        if (isBlank(programId)) {
            popup.tipsTop("节目ID错误，请联系管理员", 'warning');
        } else {
            var tempwindow=window.open();
            //节目状态:0：已审批，1：待审批，2：待发布，3：已过期
            if(programStatus == '2' || programStatus == '待发布'){
                //待发布跳转到编辑节目
                if(programAddStatus == 0){
                    //待编辑节目
                    tempwindow.location=clientEditDomain + "?programId=" + programId + "&token=" + token;
                } else if(programAddStatus == 1){
                    //待投放设置
                    tempwindow.location=clientPushDomain + "?programId=" + programId + "&token=" + token;
                } else if(programAddStatus == 2){
                    //待审批发布
                    tempwindow.location=clientCheckDomain + "?programId=" + programId + "&token=" + token;
                } else {
                    tempwindow.location=clientEditDomain + "?programId=" + programId + "&token=" + token;
                }
            } else if(programStatus == '0'
                || programStatus == '已审批'
                || programStatus == '1'
                || programStatus == '待审批'
                || programStatus == '3'
                || programStatus == '已过期'){
                //待发布跳转到编辑节目
                tempwindow.location=clientDetailDomain + "?programId=" + programId + "&token=" + token;
            }
        }
    }

    /**
     * 节目下载详情
     * @param btn
     */
    function downloadDetail(btn) {
        var data = btn.dataset;
        var programVersion = data.programVersion;
        if (isBlank(programVersion)) {
            popup.tipsTop("节目版本号错误，请联系管理员", 'warning');
        } else {
            App.layerOpen({
                url: context + '/cpProgram/listDeviceDownloadByPage?programVersion=' + programVersion,
                title: "节目下载详情"
            });
        }
    }

    /**
     * 从终端删除节目时的终端列表
     * @param btn
     */
    function deleteFromDevice(btn) {
        var data = btn.dataset;
        var programVersion = data.programVersion;
        if (isBlank(programVersion)) {
            popup.tipsTop("节目版本错误，请联系管理员", 'warning');
        } else {
            App.layerOpen({
                url: context + '/cpProgram/listDeleteProgramFromDeviceByPage?programVersion=' + programVersion,
                title: "终端列表"
            });
        }
    }

    /**
     * 编辑节目
     * @param btn
     */
    function editProgram(btn) {
        var data = btn.dataset;
        var programId = data.programId;
        var addStatus = data.addStatus;
        if (isBlank(programId)) {
            popup.tipsTop("节目ID错误，请联系管理员", 'warning');
        } else {
            var tempwindow=window.open();
            if (addStatus == 0) {
                tempwindow.location=clientEditDomain + "?programId=" + programId + "&token=" + token;
            } else if (addStatus == 1) {
                tempwindow.location=clientPushDomain + "?programId=" + programId + "&token=" + token;
            } else if (addStatus == 2) {
                tempwindow.location=clientCheckDomain + "?programId=" + programId + "&token=" + token;
            }
        }
    }

    /**
     * 审批
     * @param btn
     */
    function authProgram(btn) {
        var data = btn.dataset;
        var programId = data.programId;
        if (isBlank(programId)) {
            popup.tipsTop("节目ID错误，请联系管理员", 'warning');
        } else {
            var tempwindow=window.open();
            tempwindow.location=clientVerifyDomain + "?programId=" + programId + "&token=" + token;
        }
    }

    /**
     * 展示节目操作日志
     * @param btn
     */
    function showLogs(btn) {
        var data = btn.dataset;
        var programVersion = data.programVersion;
        if (isBlank(programVersion)) {
            popup.tipsTop("节目版本号错误，请联系管理员", 'warning');
        } else {

            layer.open({
                type: 2 //此处以iframe举例
                , title: '节目操作日志'
                , area: ['900px', '500px']
                , maxmin: true
                , content: context + '/programLog/listByPage?programVersion=' + programVersion
                , btnAlign: 'c'
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero) //重点2
                }
            })
        }
    }

    /**
     * 创建节目
     */
    function addProgram() {
        App.layerOpen({
            url: context + '/cpProgram/toAddProgramPage',
            title: "创建节目"
        });
    }

    /**
     * 导出节目zip
     */
    function exportZip(btn) {
        var data = btn.dataset;
        var zipUrl = data.zipUrl;
        if (isBlank(zipUrl)) {
            popup.tipsTop("压缩包失败或未完成，请稍后再试", 'warning');
        } else {
            window.location.href = zipUrl;
        }
    }
</script>
</body>

</html>